<!--所有文章列表 右侧正文部分-->
<template>
  <section class="single-portfolio background-white rounded padding-50 shadow-blue mt-0" id="content">
    <!-- loading -->
    <div v-if="!is_loaded" class="row portfolio-wrapper-unit portfolio-wrapper-unit-loading">
      <xloading></xloading>
    </div>
    <div v-else class="row portfolio-wrapper-unit">
      <div v-for="(article,key) in article_lists"
           class="col-md-4 col-sm-6 grids-item" :key="key">
        <a>
          <div class="portfolio-item">
            <div class="details">
              <h4 class="title">{{ article.article_name }}</h4>
            </div>
            <span class="plus-icon" @click="toArticlePage(article.pk,article.article_name)">→</span>
            <div class="thumb">
              <v-img :lazy-src="ftpIP + '/image' + article.article_image"
                     :src="ftpIP + '/image' + article.article_image"
                     :alt="article.article_name"
                     aspect-ratio="1.6"/>
              <div class="mask"></div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </section>
</template>

<script>
import {getAllArticles, getArticleWithCateAPI} from "@/components/utils/api";
import xloading from "@/common/utils/util/loading"

export default {
  name: "content_article_list",
  components: {
    xloading
  },
  watch: {
    '$route.query.cate': function (newVal, oldVal) {
      this.cate = newVal
      this.getArticleWithCate(this.cate)
    }
  },

  data() {
    return {
      cate: this.$route.query.cate,
      article_lists: "",
      ftpIP: this.$FTPReIP,
      is_loaded: true
    }
  },

  mounted() {
    this.getAllArticles()
  },

  methods: {
    // 获取所有文章
    getAllArticles() {
      getAllArticles("all").then(res => {
        this.article_lists = res.article_list
      })
    },
    // 查询指定类别的文章
    getArticleWithCate(menu_code) {
      this.article_lists = []
      this.is_loaded = !this.is_loaded
      getArticleWithCateAPI(menu_code).then(res => {
        if (res.res_status === 200) {
          this.article_lists = res.note_article_data;
        }
      }).catch(err => {
        console.error(err)
      }).finally(() => {
        this.is_loaded = true
      })
    },
    // 页面跳转
    toArticlePage(articleId, articleName) {
      let q = {
        articleId: articleId
      }
      let routeData = this.$router.resolve({path: '/article', query: q});
      window.open(routeData.href, '_blank');
    },
  }
}
</script>

<style scoped>

</style>